<script setup>
defineProps({enter: Boolean})
</script>

<template>
  <view class="row container">
    <view class="column" v-if="enter">
      <view class="font190 top30 inter bottomIn d1s">WHY</view>
      <view class="font140 inter bottomIn d1s">CHOOSE US?</view>
      <view class="font60 sans top6 bottomIn d1s">我们的优势</view>
    </view>
    <view class="column segRight font26" v-if="enter">
      <view class="column bottomIn d2s">
        <view>全球化专业团队</view>
        <span class="inter">Global Professional Team</span>
      </view>
      <view class="column bottomIn d2s marginLeft">
        <view>全渠道营销推广</view>
        <span class="inter">Omnichannel Marketing <br> and Promotion</span>
      </view>
      <view class="column bottomIn d2s marginLeft">
        <view>敏锐的洞察力与前瞻性</view>
        <span class="inter">Keen Insight and Foresight</span>
      </view>
      <view class="column bottomIn d2s">
        <view>驱动品牌价值和财富的持续增长</view>
        <span class="inter">Driving Sustainable Growth in <br> Brand Value and Wealth</span>
      </view>
    </view>
  </view>
</template>

<style scoped>
.container {
  height: calc(100vw * (1130 / 1920));
  justify-content: space-between;
  background-image: url("https://neocross.oss-cn-beijing.aliyuncs.com/sky/h5pic/img_index_earth.png");

  .segRight {
    justify-content: space-between;
    margin: 16% 4% 14% 0;

    .marginLeft {
      margin-left: 16%;
    }
  }
}
</style>